<template>
	<view class="page">
		<view class="search">
			<!-- 项目（订单）展示 -->
			<view class="dd" @click="toOrders">
				<!-- <u-text class="text" suffixIcon="arrow-down" align="center" :text="order" @click="toOrders"></u-text> -->
				<uni-data-select class="text" v-model="order.name" :placeholder="order.name" disabled></uni-data-select>
			</view>
			<view class="ss">
				<!-- <u-input placeholder="请输入站点名称" v-model="search.name" @change="change1" clearable></u-input> -->
				<uni-easyinput v-model="search.name" placeholder="请输入站点名称" @change="change1" clearable></uni-easyinput>
				<!-- <uni-search-bar @confirm="change1" :focus="true" v-model="search.name"  @input="change1" @clear="clear" cancelButton="none">
				</uni-search-bar> -->
			</view>
			<view class="ss">
				<uni-data-select v-model="search.type" placeholder="请选择预警类型" :localdata="types"
					@change="change2"></uni-data-select>
			</view>
		</view>
		<view class="wrap">
			<view class="content">
				<view class="items" v-for="(item,index) in data" :key="index">
					<text style="font-size:32rpx;">{{item.type}}</text><!-- color:red -->
					<view style="font-size:26rpx;float:right">{{item.createDate}}</view>
					<view style="font-size:28rpx;">{{item.contents}}</view>
				</view>
				<u-loadmore :status="status" :loadmoreText="loadmoreText" @loadmore="loadmore" />
			</view>
		</view>
	</view>

</template>
<script>
	import {
		getTreeJsonByCode
	} from '@/api/common.js';
	import {
		findAppSysWarning
	} from '@/api/common.js';
	export default {
		data() {
			return {
				page: 1,
				pageCount: 10,
				// 数据总量
				total: 0,
				search: {
					name: '',
					type: '',
					online: 0
				}, //查询的参数
				types: [{
						value: "Led",
						text: "站牌"
					},
					{
						value: "LCD",
						text: "导乘屏"
					}
				],
				order: {
					name: '请先选订单'
				},
				pid: '',
				status: 'loadmore',
				loadmoreText: '点击加载更多',
				total: '总数：100',
				online: '在线：100',
				offline: '离线：100',
				column: [{
						name: 'sname',
						label: '站点',
						fixed: false,
						width: 104,
						emptyString: '--'
					},
					{
						name: 'dir',
						label: '位置',
						sorter: false,
						width: 60,
						align: 'right',
					},
					{
						name: 'progress',
						label: '进度',
						width: 65,
						// filters: {
						// 	0: '处理中',
						// 	1: '未处理'
						// }
					},
					{
						name: 'stime',
						label: '时间',
						width: 100,
						sorter: true
					},
				],
				data: [],
			}
		},
		onLaunch() {
			uni.hideTabBar({})
		},
		onShow() {
			uni.hideTabBar({})
			let that = this
			uni.$on('order', function(data) {
				console.log('监听到事件来自 testdata ，携带参数为：' + JSON.stringify(data));
				if (that.order.id != data.id) {
					console.log('订单修改....')
					that.order = data
					that.data = []
					that.page = 1
					that.toSearch()
				}
			})
		},
		onReachBottom() {
			this.status = 'loading';
			console.log('触发上拉加载：' + this.status)
			this.page++;
			this.toSearch()
		},
		onLoad() {
			this.device_types();
			uni.getStorage({
				key: 'order',
				success: (e) => {
					this.order = e.data
					this.toSearch(this)
				}
			})
			uni.showToast({
				title: err,
				icon: '请先选择订单'
			});
		},
		methods: {
			loadmore() {
				console.log('触发加载：' + this.status)
				this.page++;
				this.toSearch()
			},
			change1(e) {
				this.search.name = e
				this.data = []
				this.page = 1
				this.toSearch(this);
			},
			change2(e) {
				this.search.type = e
				this.data = []
				this.page = 1
				this.toSearch(this);
			},
			//查詢設備列表
			toSearch(e) {
				findAppSysWarning({
					pid: this.order.id,
					sname: this.search.name,
					etype: this.search.type,
					pageSize: this.pageCount,
					page: this.page
				}).then(res => {
					if (res.records.length > 0) {
						res.records.forEach(item => {
							this.data.push(item)
						})
					}
					if (res.hasNext == false) {
						this.status = 'nomore';
					}

				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
					// })
				})
			},
			toOrders() {
				console.log('准备跳转项目列表页面')
				uni.navigateTo({
					url: '/pages/order_select/order_select'
				})
			},
			//获取设备类型
			device_types() {
				getTreeJsonByCode({
					code: "FaultType"
				}).then(res => {
					console.log(res);
					if (res.length > 0) {
						this.types = []
						res.forEach(item => {
							//forEach循环
							console.log(item);
							this.types.push({
								value: item.value,
								text: item.value
							})
						});
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},

		},
		// onLoad () {
		// 	this.toSearch(this)
		// }
	}
</script>

<style lang="scss" scoped>
	.page {}

	.name2 {
		height: 120rpx;
		width: 84vw;
		@include flex();
		margin-bottom: 4vh;

		.name2_1 {
			color: $font-color;
			font-size: 40rpx;
			width: 100vw;
			text-align: center;
		}
	}

	.content {
		margin-top: 32rpx;

		.items {
			border-bottom: 1px solid #eee;
			padding: 10px;
			line-height: 1.5
		}
	}

	.btn {
		width: 280rpx;

		.btn_i {
			height: 68rpx;
			background-color: $bg-color;
			border-color: $bg-color;
			border-radius: 8rpx;
			color: white;
			font-size: 24rpx;
			text-align: center;
		}
	}


	.search {
		@include flex(space-between, flex-start);
		margin-top: 16rpx;
		height: 80rpx;

		.dd {
			width: 24vw;
			// height: 100%;
			// @include flex(center, center);

			// .text {
			// 	width: 100%;
			// 	text-align: left;
			// 	vertical-align: center;
			// }
		}

		.ss {
			width: 36vw;
		}
	}

	.row {
		margin-top: 20rpx;
	}

	.table {
		margin-top: 20rpx;
	}
</style>